<template>
  <div class="app-container table-container">
    <el-row type="flex" justify="end">
      <el-button type="primary" size="medium" @click="addTict" >新增优惠券</el-button>
    </el-row>
    <!--        <el-col>-->
    <!--            <label>商户:</label>-->
    <!--            <el-select filterable placeholder="请选择商户" @change='changeYard' style="width:150px" v-model="defaultAuditState">-->
    <!--                <el-option v-for="(ky,val) in auditState" :key="ky" :label="ky" :value="val"></el-option>-->
    <!--            </el-select>-->
    <!--        </el-col>-->
    <!--        <span>请选择</span>-->
    <!--        <el-select  filterable placeholder="请选择票务信息" @change='getTictValue'>-->
    <!--            <el-option-->
    <!--                    v-for="item in tictData"-->
    <!--                    :key="item.code"-->
    <!--                    :label="item.name"-->
    <!--                    :value="item.name">-->
    <!--                {{item.name}}-->
    <!--            </el-option>-->
    <!--        </el-select>-->
    <el-table
      :data="couponData"
      size="mini"
      :header-cell-style="{background:'#e5ecf1',fontWeight: 'bold',textAlign: 'center'}"
      highlight-current-row
      border
      style="font-size: 16px;"
    >
      <el-table-column prop="name" label="优惠券名称" min-width="70" />s
      <el-table-column prop="couponCode" label="优惠券编码" min-width="50" />
      <el-table-column prop="category" label="优惠类型" min-width="100" />
      <!--            <el-table-column prop="purchaseCanal" label="购买渠道" min-width="50"></el-table-column>-->
      <el-table-column prop="couponCount" label="发放数量" min-width="100" />
      <el-table-column prop="peopleLimit" label="检票场馆" min-width="70" />
      -
      <!--            <el-table-column prop="tictCode" label="票代码" min-width="50"></el-table-column>-->
      <!--            <el-table-column prop="startTime" label="预约时间" min-width="50"></el-table-column>-->
      <!--            <el-table-column prop="yardName" label="场地名称" min-width="50"></el-table-column>-->
      <el-table-column prop="templateRule.usage.usageType" label="适用范围" min-width="50" />
      <el-table-column prop="templateRule.expiration.startTime" label="有效期开始时间" min-width="50" >
        <template slot-scope="scope">
          {{parseTime(scope.row.templateRule.expiration.startTime)}}
        </template>
      </el-table-column>
      <el-table-column prop="templateRule.expiration.endTime" label="有效期结束时间" min-width="50">
        <template slot-scope="scope">
          {{parseTime(scope.row.templateRule.expiration.endTime)}}
        </template>
      </el-table-column>
      <el-table-column width="180" fixed="right" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="editTict( scope.row )"
          >编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="left" class="pagination">
      <el-pagination
        background
        :current-page="orderPage.currentPage"
        :page-sizes="[10, 20, 30]"
        :page-size="orderPage.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="orderPage.totalElements"
        @size-change="userSize"
        @current-change="pgChge"
      />
    </el-row>
    <div v-if="addDialogVisible">
    <el-dialog title="新增票务基本信息" :visible.sync="addDialogVisible " width="50%" append-to-body>
      <add-tict ref="addCoupon"  @close="closeDialog"/>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveAddDlg">确 定</el-button>
        <el-button @click="cancelAddDlg">取 消</el-button>
      </div>
    </el-dialog>
    </div>
    <div v-if="editDialogVisible">
    <el-dialog title="修改票务基本信息" :visible.sync="editDialogVisible " width="50%" append-to-body>
      <edit-tict ref="editCoupon" :tict-uuid="currentUuid"  @close="closeDialog"/>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveEditDlg">确 定</el-button>
        <el-button @click="cancelEditDlg">取 消</el-button>
      </div>
    </el-dialog>
  </div>
  </div>
</template>

<script>
import { getDataForSP, writePageInfo } from '../../../utils/webUtils.js'
import addTict from './addCoupon.vue'
import editTict from './editCoupon.vue'

export default {
  name: 'CheckList',
  components: { addTict, editTict },
  data() {
    return {
      addDialogVisible: false,
      editDialogVisible: false,
      currentUuid: '',
      formAlignLeft: 'left',
      editBoxShow: false,
      addShow: false,
      editShow: false,
      pwdShow: false,
      userSchOn: '',
      userEdit: false,
      lookBoxShow: false,
      lookShow: false,
      uuid: '',
      couponData: [],
      defaultAuditState: '',
      orderPage: {
        pageSize: 10, // 每页显示条目个数
        currentPage: 1, // 当前页数
        totalElements: 0,
        searchData: {
        }
      }
    }
  },
  mounted() {
    // 默认展示审核中的数据
    this.queryCoupon()
  },
  methods: {
    editState(msg) {
      this.editBoxShow = msg
      this.addShow = msg
      this.userEdit = msg
      this.queryCoupon()
    },
    addTict() {
     this.$router.push("/addCoupon")
    },
    editTict(val) {
      this.currentUuid = val.id
      this.$router.push("/editCoupon/"+this.currentUuid)
    },
    changeAuditState() {
      this.queryCoupon()
    },

    // 获取所有数据
    queryCoupon() {
      this.axios.request({
        method: 'get',
        url: './coupon/coupon/template/getAllByPage',
        params: getDataForSP(this.orderPage)
      }).then(response => {
        this.couponData = response.data.data
        writePageInfo(this.orderPage, response.data)
      }).catch(error => {
        console.log(error)
      })
    },
    // 列表分页
    userSize: function(pageSize) {
      this.orderPage.pageSize = pageSize
      if (this.orderPage.currentPage === 1) {
        if (this.userSchOn !== '') {
          // this.userSearch();
        } else {
          this.queryCoupon()
        }
      }
      this.orderPage.currentPage = 1
    },
    pgChge(currentPage) {
      this.orderPage.currentPage = currentPage
      this.queryCoupon()
    }
  }
}
</script>

<style scoped lang="scss">
  @import "@/styles/table.scss";
  .app-container{
  .pagination{
    padding: 10px 0;
  }
  }
</style>
